import { Button, Drawer } from 'antd';
import { Space, Table } from 'antd';
import { message, Popconfirm, Form, Input } from 'antd';
import http from '../../../api/index'
import { useEffect, useState } from 'react';
function Index() {
    const { Search } = Input;
    const [list, setList] = useState([])
    const [page, setPsge] = useState(1)
    const [pageSize, setPageSize] = useState(10)
    const getList = () => {
        http.get('/api/article/list', {
            params: {
                page: page,
                pageSize: pageSize
            }
        }).then(res => {
            console.log(res.data.rows);
            setList(res.data.rows)
        })
    }
    useEffect(() => {
        getList()
    }, [page, pageSize])
    const onChange = (page: string, pageSize: string) => {
        setPsge(page)
        setPageSize(pageSize)
    }
    const columns = [
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '题目',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '内容',
            dataIndex: 'content',
            key: 'content',
        },
        {
            title: '浏览',
            dataIndex: 'viewCount',
            key: 'viewCount',
        },
        {
            title: '标签',
            dataIndex: 'tags[0]',
            key: 'tags[0]',
        },
        {
            title: '创建时间',
            dataIndex: 'createdAt',
            key: 'createdAt',
        },
        {
            title: '内容',
            dataIndex: 'updatedAt',
            key: 'updatedAt',
        },
        {
            title: 'Action',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button onClick={() => bj(record)}>编辑</Button>
                    <Popconfirm
                        title="提示"
                        description="你确定删除吗?"
                        onConfirm={() => confirm(record)}
                        onCancel={cancel}
                        okText="确定"
                        cancelText="取消"
                    >
                        {/* 280 */}
                        <Button danger>删除</Button>
                    </Popconfirm>
                </Space>
            ),
        },
    ];
    // =====================================删除
    const confirm = (record) => {
        setList(prev => prev.filter(item => item.id !== record.id))
    };
    const cancel = e => {
        console.log(e);
        message.error('Click on No');
    };
    const [open, setOpen] = useState(false);
    const [title, setTitle] = useState('')
    const [form] = Form.useForm()
    const [id, setId] = useState('')
    const add = () => {
        setOpen(true);
        setTitle('新增')
        form.resetFields()
    };
    const bj = (record) => {
        setOpen(true);
        setTitle('编辑')
        form.setFieldsValue(record)
        setId(record.id)
    }
    const onClose = () => {
        setOpen(false);
    };
    const onFinish = values => {
        const data = {
            "title": values.title,//文章标题
            "content": values.content,//文章内容
            "tagList": ["HTTP"],//标签  array[string]
            "categoryList": ["HTTP"],//分类  array[string]
            "authorId": 47529555//用户id 暂时写死47529555 登陆成功后返回的用户信息
        }
        // ========================================================================新增
        if (title === '新增') {
            http.post('/api/article', data).then(res => {
                console.log(res.data);
                getList()
                alert('新增成功')
                setOpen(false);
            })
            // ===================================================================编辑
        } else if (title === '编辑') {
            http.put(`/api/article/${id}`, { ...data, id: id }).then(res => {
                console.log(res.data);
                getList()
                alert('编辑成功')
                setOpen(false);
            })
        }
    };
    const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };
    const [value, setValue] = useState('')
    const onSearch = (value) => {
        http.get('/api/article/list', {
            params: {
                keyword:value
            }
        }).then(res => {
            console.log(res.data.rows);
            setList(res.data.rows)
        })
    }
 
    return (
        <div>

            <Button type="primary" onClick={add}>
                新增
            </Button>
            <Search
                placeholder="input search text"
                allowClear
                style={{width:300,marginLeft:30}}
                enterButton="搜索"
                size="large"
                onSearch={onSearch}
            />
            <Button style={{marginLeft:30}}>重置</Button>
            <Drawer
                title={title}
                closable={{ 'aria-label': 'Close Button' }}
                onClose={onClose}
                open={open}
            >
                <Form
                    form={form}
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="id"
                        name="id"
                        rules={[{ required: true, message: 'Please input your username!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="题目"
                        name="title"
                        rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="内容"
                        name="content"
                        rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="创建时间"
                        name="createdAt"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="更新时间"
                        name="updatedAt"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item label={null}>
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                    </Form.Item>
                </Form>
            </Drawer>
            <Table columns={columns} dataSource={list}
                pagination={{
                    total: 585,
                    showSizeChanger: true,
                    showQuickJumper: true,
                    showTotal: total => `Total ${total} items`,
                    onChange: onChange
                }}
            />
        </div>
    )
}
export default Index
